<template>
    <!-- <div class="list" ref="wrapper">
        <div>
          

            <div class="area" v-for="(item,index) in cities" :key="index">
                <div class="title border-topbottom">
                    {{ index }}
                </div>
                <div class="item-list">
                    <div class="item border-bottom" v-for="(ele,i) in item" :key="i">
                        {{ ele.name }}
                    </div>
                  
                </div>
            </div>

        </div>
    </div> -->
</template>


<script>
import Bscroll from "better-scroll";
import axios from "axios";
export default {
  props: {
    cities: Object,
    // hot: Array,
    letter: String
  },
  //   components: { Alphabet },
  data() {
    return {
      //   cities: []
    };
  },
  methods: {
    change(val) {
      console.log(val);
    }
  },
  created() {
    axios.get("static/city.json").then(res => {
      console.log(res);
      this.cities = res.data.data.hotCities;
      //     this.cities = res.data.data.cities;
    });
  },
  computed: {
    letters() {
      const letters = [];
      for (let i in this.cities) {
        letters.push(i);
      }
      return letters;
    }
  },

  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper);
  },
  watch: {
    letter() {
      console.log(this.letter);
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        console.log(element);
        // this.scroll.scrollToElement(element);
      }
    }
  }
};
</script>

// <style lang="stylus" scoped>
// .border-topbottom {
//     &:before {
//         border-color: #ccc;
//     }

//     &:after {
//         border-color: #ccc;
//     }
// }

// .border-bottom {
//     &:before {
//         border-color: #ccc;
//     }
// }

// .list {
//     overflow: hidden;
//     position: absolute;
//     top: 1.58rem;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     margin-top: 1.3rem;
//     font-size: 0.2rem;

//     // background-color: #0d484e;

//     // background:red
//     .title {
//         line-height: 0.54rem;
//         // background: #eee;
//         padding-left: 0.2rem;
//         color: #666;
//         font-size: 0.2rem;
//     }

//     .button-list {
//         overflow: hidden;
//         padding: 0.1rem 0.6rem 0.1rem 0.1rem;

//         .button-wrapper {
//             float: left;
//             width: 33.33%;

//             .button {
//                 margin: 0.1rem;
//                 padding: 0.1rem 0;
//                 text-align: center;
//                 border: 0.02rem solid #ccc;
//                 border-radius: 0.06rem;
//             }
//         }
//     }

//     .item-list {
//         // margin-top: 0.8rem;
//         .item {
//             line-height: 0.76rem;
//             padding-left: 0.2rem;
//             font-size: 0.2rem;
//         }
//     }
// }

// .area {
//     padding-top: 2rem;
// }
// </style>
